<template>
  <div class="task-list-container">
    <!-- 模块标题与描述 -->
    <div class="section-header">
      <h2 class="title">任务列表</h2>
      <p class="desc">查看教师发布的训练任务和考核要求</p>
    </div>

    <!-- 我的任务卡片 -->
    <el-card class="my-task-card">
      <div slot="header" class="card-header">
        <span>我的任务</span>
        <span class="sub-desc">完成任务并提交飞行记录以获得评分</span>
      </div>
      <!-- 无任务提示，可根据实际数据展示逻辑切换 -->
      <div v-if="tasks.length === 0" class="empty-tip">
        暂无任务
      </div>
      <!-- 有任务时的列表展示，这里简单示例，可根据真实数据结构扩展 -->
      <el-table v-else :data="tasks" border style="width: 100%">
        <el-table-column prop="id" label="任务ID" width="120" />
        <el-table-column prop="name" label="任务名称" />
        <el-table-column prop="des" label="考核要求" />
        <el-table-column prop="create_time" label="开始时间" width="180" />
        <el-table-column prop="end_time" label="结束时间" width="180" />
        <el-table-column prop="taskStatus" label="状态" width="120" />
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'TaskList',
  data() {
    return {
      // 模拟任务数据，实际可从接口获取

      // 若有数据，格式示例：
      tasks: [
        { id: 1, name: '森林巡检任务', des: '完成森林区域巡检，无遗漏', taskStatus: 0, create_time: '2025-08-20',end_time:'2025-08-30' },
        { id: 2, name: '海域救援演练', des: '成功模拟救援流程', taskStatus: 1 ,create_time: '2025-08-20',end_time:'2025-08-30' },
        { id: 3, name: '海域救援演练', des: '成功模拟救援流程', taskStatus: 2 ,create_time: '2025-08-20',end_time:'2025-08-30' }
      ]
    }
  }
}
</script>

<style scoped>
.task-list-container {
  
  padding: 20px;
  background-color:#fff;
    border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.section-header {
  margin-bottom: 20px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.desc {
  font-size: 14px;
  color: #999;
}

.my-task-card {
  --el-card-padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.sub-desc {
  font-size: 12px;
  color: #999;
}

.empty-tip {
  text-align: center;
  padding: 30px 0;
  color: #999;
}
</style>